<template>
    <div class="student-container">
        <div>
            <el-form :inline="true" :model="params.params" class="demo-form-inline" ref="form">
                <el-form-item label="等级">
                    <el-select v-model="params.params.level" placeholder="请输入等级" clearable>
                        <el-option label="国家级奖学金" value="国家级奖学金"></el-option>
                        <el-option label="学校奖学金" value="学校奖学金"></el-option>
                        <el-option label="其它奖学金" value="其它奖学金"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="params.params.status" placeholder="请选择状态" clearable>
                        <el-option label="初审中" value="初审中"></el-option>
                        <el-option label="复审中" value="复审中"></el-option>
                        <el-option label="通过" value="通过"></el-option>
                        <el-option label="审核失败" value="审核失败"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getDataSource">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tool">
            <el-button type="primary" @click="dialogVisible = true" plain>申请</el-button>
        </div>
        <el-table style="width: 100%" stripe v-loading="loading" :data="dataSource">
            <el-table-column prop="collegeName" label="院系" width="180" />
            <el-table-column prop="majorName" label="专业" width="180" />
            <el-table-column prop="trueName" label="姓名" width="100" />
            <el-table-column prop="level" label="等级" width="140" />
            <el-table-column prop="academicYear" label="学年" width="100" />
            <el-table-column prop="attachmentPath" label="附件" width="140px">

                <template #default="scope">
                    <span>
                        <el-link v-if="scope.row.attachmentPath" type="primary"
                            :href="scope.row.attachmentPath">点击下载</el-link>
                        <el-link v-else type="warning">无文件</el-link>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="desc" label="申请理由" />
            <el-table-column prop="status" label="状态" />
            <el-table-column prop="reason" label="原因" />
            <el-table-column prop="createTime" label="申请时间" width="180px" />
            <el-table-column label="操作" width="150px">
                <template #default="scope">
                    <el-button type="danger" v-if="scope.row.status === '审核失败'" @click="handleUpdate(scope.row)"
                        size="small">修改</el-button>
                    <el-button type="danger" v-if="scope.row.status === '审核失败'" @click="deleteUpdate(scope.row)"
                        size="small">删除</el-button>
                    <el-button @click="showDetail(scope.row)" size="small" type="primary">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin:10px 0" @current-change="currentChange" background layout="prev, pager, next"
            :total="params.total" />
        <el-dialog v-model="dialogVisible" title="申请" width="50%" :before-close="handleClose">
            <el-form :model="formModel" class="demo-form-inline" label-width="100px">
                <el-form-item label="学年">
                    <el-select v-model="formModel.academicYear" placeholder="请输入学年" disabled clearable>
                        <el-option label="2023上半年" value="2023上半年"></el-option>
                        <el-option label="2023下半年" value="2023下半年"></el-option>
                        <el-option label="2024上半年" value="2024上半年"></el-option>
                        <el-option label="2023下半年" value="2023下半年"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="理由">
                    <el-input type="textarea" :rows="4" v-model="formModel.desc" placeholder="请输入理由" clearable />
                </el-form-item>
                <el-form-item label="附件">
                    <el-upload class="upload-demo" drag action="/api/file/upload" :on-success="onSuccess"
                        v-model:file-list="fileList">
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            拖拽文件到这里或 <em>点击这里</em>
                        </div>

                    </el-upload>
                </el-form-item>
                <el-form-item label="论文">
                    已添加{{ articles.length }}个论文
                    <el-button @click="articleDialogVisible = true" style="margin-left: 10px">添加论文</el-button>
                </el-form-item>
                <el-form-item label="竞赛奖项">
                    已添加{{ races.length }}个竞赛奖项
                    <el-button @click="raceDialogVisible = true" style="margin-left: 10px">添加竞赛奖项</el-button>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitSave">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="articleDialogVisible" title="添加论文" width="60%" :before-close="() => articles = []">
            <el-form v-model="articleData">
                <el-row v-for="(item, index) in articles" :key="index" :gutter="10">
                    <el-col :span="7">
                        <el-form-item label="论文名称">
                            <el-input v-model="item.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="论文级别">
                            <el-select v-model="item.level" @change="levelChange(index, $event)">
                                <el-option label="SCI" value="SCI"></el-option>
                                <el-option label="EI" value="EI"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="附件">
                            <el-upload action="/api/file/upload" :show-file-list="false"
                                :on-success="(response) => { item.attachement = response.data; item.uploadText = '已上传' }">
                                <el-button type="primary">{{ item.uploadText }}</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-input v-model="item.score" placeholder="积分数" />
                        </el-form-item>

                    </el-col>
                    <el-col :span="3">
                        <el-form-item>
                            <el-button type="danger" @click="articles.splice(index, 1)">删除</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button @click="articles.push({ name: '', level: '', uploadText: '上传' })">增加</el-button>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="articleDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="articleDialogVisible = false">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="raceDialogVisible" title="添加竞赛奖项" width="60%" :before-close="() => races = []">
            <el-form v-model="raceData">
                <el-row v-for="(item, index) in races" :key="index" :gutter="10">
                    <el-col :span="7">
                        <el-form-item label="竞赛名称">
                            <el-input v-model="item.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="获奖级别">
                            <el-select v-model="item.level" @change="levelChange(index, $event)">
                                <el-option label="国家级一等奖" value="国家级一等奖"></el-option>
                                <el-option label="国家级二等奖" value="国家级二等奖"></el-option>
                                <el-option label="国家级三等奖" value="国家级三等奖"></el-option>
                                <el-option label="省级一等奖" value="省级一等奖"></el-option>
                                <el-option label="省级二等奖" value="省级二等奖"></el-option>
                                <el-option label="省级三等奖" value="省级三等奖"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="附件">
                            <el-upload action="/api/file/upload" :show-file-list="false"
                                :on-success="(response) => { item.attachement = response.data; item.uploadText = '已上传' }">
                                <el-button type="primary">{{ item.uploadText }}</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-input v-model="item.score" placeholder="积分数" />
                        </el-form-item>

                    </el-col>
                    <el-col :span="3">
                        <el-form-item>
                            <el-button type="danger" @click="races.splice(index, 1)">删除</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button @click="races.push({ name: '', level: '', uploadText: '上传' })">增加</el-button>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="raceDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="raceDialogVisible = false">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="detailVisible" title="详情" width="60%">
            <el-descriptions :column="4" border>
                <template v-for="(item, index) in detail.articles" :key="'art_'+index">
                    <el-descriptions-item label="论文名称">{{ item.name }}</el-descriptions-item>
                    <el-descriptions-item label="论文级别">{{ item.level }}</el-descriptions-item>
                    <el-descriptions-item label="附件">
                        <el-link type="primary" v-if="item.attachement" :href="item.attachement">查看</el-link>
                        <span v-else>无附件</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="积分">{{ item.score }}</el-descriptions-item>
                </template>
                <template v-for="(item, index) in detail.races" :key="'art_'+index">
                    <el-descriptions-item label="竞赛名称">{{ item.name }}</el-descriptions-item>
                    <el-descriptions-item label="奖项级别">{{ item.level }}</el-descriptions-item>
                    <el-descriptions-item label="附件">
                        <el-link type="primary" v-if="item.attachement" :href="item.attachement">查看</el-link>
                        <span v-else>无附件</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="积分">{{ item.score }}</el-descriptions-item>
                </template>
            </el-descriptions>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="detailVisible = false">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
import request from '@/utils/http';
import { ref, onMounted } from 'vue'
import { toRaw } from '@vue/reactivity';
import { ElMessage } from 'element-plus'
export default {
    name: "SScholarship",
    setup() {
        const form = ref(null)
        onMounted(() => {
            console.log(form);
        })
    },
    data() {
        return {
            dataSource: [],
            params: {

                trueName: '',
                level: '',
                status: '',
                pageNum: 1,
                total: 0,
                params: {
                }
            },
            fileList: [],
            loading: false,
            dialogVisible: false,
            articleDialogVisible: false,
            raceDialogVisible: false,
            detailVisible: false,
            formModel: {
                academicYear: '2023上半年'
            },
            articles: [],
            races: [],
            majorOptions: [],
            collegeOptions: [],
            detail: {}
        }
    },
    methods: {
        showDetail(row) {
            let id = toRaw(row).scholarshipId;
            request.get("/sscholarship/" + id)
                .then((response) => {
                    this.detail.articles = JSON.parse(response.data.articles)
                    this.detail.races = JSON.parse(response.data.races)
                    this.detailVisible = true
                })
        },
        levelChange(index, event) {
            if (event === 'SCI') {
                this.articles[index].score = 80
            } else if (event === 'EI') {
                this.articles[index].score = 10
            }
        },
        deleteUpdate(row) {
            let id = toRaw(row).scholarshipId;
            request.post("/sscholarship/del/" + id)
                .then(response => {
                    if (response.code === 200) {
                        ElMessage({
                            message: '操作成功',
                            grouping: true,
                            type: 'success',
                        })
                        this.dialogVisible = false
                        this.getDataSource()
                    }
                })
        },
        submitSave() {
	let tmp = this.articles.filter(item => item.name != '')
            this.formModel.articles = JSON.stringify(tmp)
            tmp = this.races.filter(item => item.name != '')
            this.formModel.races = JSON.stringify(tmp)
            delete this.formModel.createTime
            request.post("/sscholarship/save", this.formModel)
                .then(response => {
                    if (response.code === 200) {
                        ElMessage({
                            message: '操作成功',
                            grouping: true,
                            type: 'success',
                        })
                        this.dialogVisible = false
                        this.getDataSource()
                    }
                })
        },
        handleUpdate(tmp) {
            let id = toRaw(tmp).scholarshipId;
            request.get("/sscholarship/" + id)
                .then(response => {
                    if (response.code === 200) {
                        this.formModel = response.data

                        let file = this.formModel.attachmentPath
                        if (file) {
                            let index = file.lastIndexOf('/')
                            let name = file.substr(index + 1)
                            this.fileList = [{
                                name,
                                url: file
                            }]
                        }
                        this.dialogVisible = true
                    }
                })
        },
        onSuccess(response) {
            console.log(response);
            if (response.code == 200) {
                this.formModel.attachmentPath = response.data
            }
        },
        resetPageParams() {
            this.params.pageNum = 1
        },
        reset() {
            this.params.params = {}
        },
        handleClose() {
            this.formModel = {}
        },
        getDataSource() {
            this.loading = true
            request.post("/sscholarship/list", this.params)
                .then(response => {
                    if (response.code === 200) {
                        let data = response.data
                        this.dataSource = data.list
                        this.params.total = data.total
                    }
                }).finally(() => {
                    this.loading = false
                })
        },
        currentChange(value) {
            this.params.pageNum = value
            this.getDataSource()
        }
    },
    created() {
        this.getDataSource()
    }

}
</script>

<style>
.tool {
    margin: 10px 0
}
</style>